<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <link rel="stylesheet" type="text/css" href="/static/jquery-easyui-1.3.3/themes/default/easyui.css"></link>
    <link rel="stylesheet" type="text/css" href="/static/jquery-easyui-1.3.3/themes/icon.css"></link>
    <script type="text/javascript" src="/static/jquery-easyui-1.3.3/jquery.min.js"></script>
    <script type="text/javascript" src="/static/jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="/static/jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript">
        var url;  // 提前定义url 执行具体操作时 动态复制
        function formatEdit(val,row) {
            console.log(row)
            return "<a href=\"javascript:openRoleChooseDialog('"+row.roleList+"',"+row.id+")\"><img style='margin-top:4px' src='/static/images/edit.gif'/></a>";
        }

        function openRoleChooseDialog(roles,userId){
            var rolesArr=roles.split(",");
            $("#dlg2").dialog("open").dialog("setTitle","选择角色");
            $("#dg2").datagrid({
                url:'/admin/role/listAll',
                onLoadSuccess:function(data){
                    var allRows=$("#dg2").datagrid("getRows");
                    for(var i=0;i<allRows.length;i++){
                        var name=allRows[i].name;
                        if($.inArray(name,rolesArr)>=0){
                            $("#dg2").datagrid("checkRow",i);
                        }
                    }
                }
            });
            $("#userId").val(userId);
        }

        function saveRoleSet() {
            var userId = $("#userId").val();
            var selectedRows = $("#dg2").datagrid("getSelections");
            var strRoleIds=[];
            for (var i=0;i<selectedRows.length;i++){
                strRoleIds.push(selectedRows[i].id);
            }

            var roleIds = strRoleIds.join(",");
            $.post("/admin/user/saveRoleSet",{roleIds:roleIds,userId:userId},function (data) {
                if (data.success){
                    closeRoleSetDialog();
                    $("#dg").datagrid("reload");
                }else{
                    $.messager.alert("系统提示","提交失败,请联系管理员!")
                }
            },"json");


        }

        function closeRoleSetDialog() {
            $("#dlg2").dialog("close");
        }

        function searchUser(){
            $("#dg").datagrid("load",{
               "userName":$("#s_userName").val()
            });
        }

        function closeUserDialog() {
            $("#dlg").dialog("close");
            resetValue();

        }

        function resetValue() {
            $("#userName").val("");
            $("#password").val("");
            $("#trueName").val("");
            $("#remarks").val("");
        }

        function saveUser() {
           $("#fm").form("submit",{
               url:url,
               onSubmit:function () {
                   return $(this).form("validate");
               },
               success:function (result) {
                   var result = eval('('+result+')');
                   if (result.success){
                       $.messager.alert("系统提示","操作成功!")
                       resetValue();
                       $("#dlg").dialog("close");
                       $("#dg").datagrid("reload");
                   }else{
                       $.messager.alert("系统提示",result.errorInfo);
                   }
               }
           })
        }
        
        function openUserAddDialog() {
            $("#userName").removeAttr("readonly");
            $("#dlg").dialog("open").dialog("setTitle","添加用户信息")
            url="/admin/user/save";
            
        }
        
        function openUserModifyDialog() {
            var selectedRows = $("#dg").datagrid("getSelections");
            if (selectedRows.length!=1){
                $.messager.alert("系统提示","请选择一条要修改的数据!")
                return;
            }
            var row = selectedRows[0];
            $("#userName").attr('readonly','readonly');
            $("#dlg").dialog("open").dialog("setTitle","修改用户信息");
            $("#fm").form("load",row);

            url="/admin/user/save?id="+row.id;

            
        }
        
        function deleteUser() {
            var selectedRows = $("#dg").datagrid("getSelections");
            if (selectedRows.length!=1){
                $.messager.alert("系统提示","请选择一条要删除的数据!")
                return;
            }

            var id = selectedRows[0].id
            $.messager.confirm("系统提示","您真的确定删除这条数据吗?",function (r) {

                if (r){
                    $.post("/admin/user/delete",{id:id},function (result) {
                        if (result.success){
                            $.messager.alert("系统提示","操作成功!")
                            $("#dg").datagrid("reload");
                        }else{
                            $.messager.alert("系统提示",result.errorInfo)
                        }
                    },"json");
                }

            });
            
        }

        // 用户双击表格内容时调用
        $(document).ready(function () {
           $("#dg").datagrid({
               onDblClickRow:function (index, row) {
                   $("#dlg").dialog("open").dialog("setTitle","修改用户信息");
                   $("#fm").form("load",row);
                   $("#userName").attr("readonly","readonly");
                   url="/admin/user/save?id="+row.id;
               }
           })

        });


    </script>

</head>
<body style="margin: 1px">
    <table id="dg" title="用户管理" class="easyui-datagrid" fitColumns="true"
    pagination="true" rownumbers="true" singleSelect="true" url="/admin/user/list" fit="true" toolbar="#tb">
        <thead>
            <th field="id" width="20" align="center">编号</th>
            <th field="userName" width="50" align="center">用户名</th>
            <th field="password" width="50" align="center">密码</th>
            <th field="trueName" width="50" align="center">真实姓名</th>
            <th field="remarks" width="80" align="center">备注</th>
            <th field="roleList" width="150" align="center">拥有角色</th>
            <th field="aa" width="50" align="center" formatter="formatEdit">角色设置</th>

        </thead>

    </table>

    <div id="tb">
        <div>
            <a href="javascript:openUserAddDialog()" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加</a>
            <a href="javascript:openUserModifyDialog()" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</a>
            <a href="javascript:deleteUser()" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>

        </div>
        <div>
            &nbsp;用户名&nbsp;<input type="text" id="s_userName" size="20" onkeydown="if (event.keyCode==13) searchUser()"/>
            <a href="javascript:searchUser()" class="easyui-linkbutton" iconCls="icon-search" plain="true">搜索</a>
        </div>
    </div>

    <div id="dlg" class="easyui-dialog" style="width: 450px;height: 300px;padding: 10px 20px"
        closed="true" buttons="#dlg-buttons" data-options="onClose:function(){resetValue()}">
        <form id="fm" method="post">
            <table cellspacing="8px">
                <tr>
                    <td>用户名: </td>
                    <td>
                        <input type="text" id="userName" name="userName" class="easyui-validatebox" required="true"/>
                    </td>
                </tr>

                <tr>
                    <td>密码: </td>
                    <td>
                        <input type="text" id="password" name="password" class="easyui-validatebox" required="true" style="width: 250px"/>
                    </td>
                </tr>

                <tr>
                    <td>真实姓名: </td>
                    <td>
                        <input type="text" id="trueName" name="trueName" class="easyui-validatebox" required="true" style="width: 250px"/>
                    </td>
                </tr>
                <tr>
                    <td valign="top">备注</td>
                    <td>
                        <textarea rows="5" cols="40" id="remarks" name="remarks"></textarea>
                    </td>
                </tr>
            </table>
        </form>
    </div>



    <div id="dlg-buttons">
        <a href="javascript:saveUser()" class="easyui-linkbutton" iconCls="icon-ok">保存</a>
        <a href="javascript:closeUserDialog()" class="easyui-linkbutton" iconCls="icon-cancel">关闭</a>

    </div>

    <div id="dlg2" class="easyui-dialog" style="width: 500px;height: 350px;" closed="true" buttons="#dlg-buttons2">
        <input type="hidden" id="userId" name="userId"/>
        <table id="dg2" class="easyui-datagrid" fitColumns="true" fit="true">
            <thead>
            <th field="cb" checkbox="true" align="center"></th>
            <th field="id" width="20" align="left" hidden="true">编号</th>
            <th field="name" width="100" align="left">角色名称</th>
            <th field="remarks" width="200" align="left">备注</th>
            </thead>
        </table>
    </div>

    <div id="dlg-buttons2">
        <a href="javascript:saveRoleSet()" class="easyui-linkbutton" iconCls="icon-ok">保存</a>
        <a href="javascript:closeRoleSetDialog()" class="easyui-linkbutton" iconCls="icon-cancel">关闭</a>

    </div>




</body>
</html>